<template>
  <div>
    <particles></particles>
    <div class="container">
      <div class="welcome">
        <div class="pinkbox">
          <!-- 教师登入 -->
          <div class="signup nodisplay" v-if="forgetpass">
            <h1>Sign In</h1>
            <form class="more-padding" autocomplete="off">
              <input type="text" placeholder="工号" v-model="username">
              <input type="password" placeholder="密码" v-model="password">
              <!-- <div class="checkbox">
                <input type="checkbox" id="remember">
                <label for="remember">Remember Me</label>
              </div>-->
              <button class="buttom sumbit" @click.prevent="Login(2)">Login</button>
            </form>
          </div>
          <!-- 教师忘记密码 -->
          <div class="signup nodisplay" v-if="forgetpass == 0">
            <h1>Sign In</h1>
            <form class="more-padding" autocomplete="off">
              <input type="text" placeholder="工号" v-model="username">
              <input type="password" placeholder="旧密码" v-model="password">
              <input type="password" placeholder="新密码" v-model="newpassword">
              <button class="buttom sumbit" @click="forgetpwdapi()">submit</button>
            </form>
          </div>

          <!-- 学生登入 -->
          <div class="signin" v-if="forgetpass">
            <h1>Sign In</h1>
            <form class="more-padding" autocomplete="off">
              <input type="text" placeholder="用户名" v-model="username">
              <input type="password" placeholder="密码" v-model="password">
              <!-- <div class="checkbox">
                <input type="checkbox" id="remember">
                <label for="remember">Remember Me</label>
              </div>-->
              <button type="button" class="buttom sumbit" @click.prevent="Login(1)">Login</button>
            </form>
          </div>
          <!-- 学生忘记密码 -->
          <div class="signin" v-if="forgetpass==0">
            <h1>Sign In</h1>
            <form class="more-padding" autocomplete="off">
              <input type="text" placeholder="学号" v-model="username">
              <input type="password" placeholder="旧密码" v-model="password">
              <input type="password" placeholder="新密码" v-model="newpassword">
              <button class="buttom sumbit" @click="forgetpwdapi()">submit</button>
            </form>
          </div>
        </div>
        <div class="leftbox">
          <h2 class="title">
            <span>星辰教务系统</span>
            <br>StarsEAS
          </h2>
          <p class="desc">
            Forget the
            <span>
              <el-link @click="forgetpassword()">Password</el-link>
            </span>
          </p>
          <!-- <img
            class="flower smaller"
            src="https://hbimg.huabanimg.com/c09305167a883e60179a45374df73252304001359acca-W3qbYm_fw658/format/webp"
          >-->
          <p class="account">You are a student?</p>
          <button class="button" id="signin" @click="signin()">change</button>
        </div>
        <div class="rightbox">
          <h2 class="title">
            <span>星辰教务系统</span>
            <br>StarsEAS
          </h2>
          <p class="desc">
            Forget the
            <span>
              <el-link @click="forgetpassword()">Password</el-link>
            </span>
          </p>
          <!-- <img
            class="flower"
            src="https://hbimg.huabanimg.com/b28be92c8198975a74ad656eba00b352c9b9e589819af-lDXUAS_fw658/format/webp"
          >-->
          <p class="account">You are a teacher?</p>
          <button type="button" class="button" id="signup" @click="signup()">change</button>
        </div>
      </div>
    </div>
  </div>
</template>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<script>
import Particles from "@/components/particles/index";
import qs from "qs";
import { script } from "../../static/js/script.js";
export default {
  data() {
    return {
      forgetpass: 1,
      username: "",
      password: "",
      newpassword: "",
      info: {
        StuId: "202003090303",
        StuName: "xyk",
        StuAge: 18,
        StuSex: "女",
        StuCarid: "123456789102369874",
        ClassId: "2020030903",
        StubackTime: "2022-03-04T00:00:00",
        StuPhone: "12345678910",
        PoliticalLandscape: "群众",
        NativePlace: "湖南长沙",
        National: "汉",
        StuEmail: "1600658861@qq.com"
      }
    };
  },
  components: { Particles },
  created() {},
  mounted() {},
  methods: {
    signup() {
      $(".pinkbox").css("transform", "translateX(80%)");
      $(".signin").addClass("nodisplay");
      $(".signup").removeClass("nodisplay");
      this.username = "";
      this.password = "";
    },
    signin() {
      $(".pinkbox").css("transform", "translateX(0%)");
      $(".signup").addClass("nodisplay");
      $(".signin").removeClass("nodisplay");
      this.username = "";
      this.password = "";
    },
    test() {
      this.$axios({
        method: "post",
        url: this.$api.InsertStudent,
        headers: {
          "Content-Type": "application/json"
        },
        data: JSON.stringify(this.info)
      }).then(res => {
        console.log(res);
      });
    },
    Login(state) {

      if(this.password == "" || this.username == ""){
         this.$message({
            message: "请输入用户名或者密码",
            type: "error"
          });
      }else{
        this.$axios({
        method: "get",
        url: this.$api.Login,
        params: {
          username: this.username,
          pwd: this.password,
          state: state
        }
      }).then(res => {
        console.log(res);
        sessionStorage.setItem("user", JSON.stringify(res.data.message));
        sessionStorage.setItem("pwd",this.password)
        this.$router.push('/studentMain')
      });
      }
      
    },
    TeacherLogin() {
      let formData = new FormData();
      const params = {
        username: this.username,
        pwd: this.password
      };
      formData.append("username", this.username);
      formData.append("pwd", this.password);
      console.log(formData);
      this.$axios({
        method: "post",
        url: this.$api.GetTeacher,
        headers: {
          "Content-Type": "multipart/form-data",
          Token: localStorage.logintoken
        },
        // data:qs.stringify(params, { arrayFormat: 'brackets' }),
        data: formData
      }).then(res => {
        console.log(res);
      });
    },
    forgetpassword() {
      this.forgetpass = !this.forgetpass;
    },
    forgetpwdapi() {
      this.$axios({
        method: "put",
        url: this.$api.UpdatePasswprd,
        params: {
          oldPwd: this.password,
          newPwd: this.newpassword,
          userName: this.username
        }
      }).then(res => {
        console.log(res);
        if (res.data.code == 200) {
          this.$message({
            message: "修改密码成功",
            type: "success"
          });
          this.forgetpass = 1;
        } else {
          this.$message({
            message: "账号或密码错误",
            type: "error"
          });
        }
      });
    }
  }
};
</script>

<style scoped >
@import "../../static/css/style.css";
</style>
